<template>
  <view class="body">
    <img class="bg_img" src="@/static/jdstb/background.png" alt="" />
    <view class="top_info">
      <view class="top_items">
        <view class="top_font">局数</view>
        <view class="top_font2">{{ proccess.round }}/20</view>
      </view>
      <view class="top_items">
        <view class="top_font">倒计时</view>
        <view class="top_font2">{{ startTime }} <text class="top_font">秒</text></view>
      </view>
      <view class="top_items">
        <view class="top_font">分数</view>
        <view class="top_font2">{{ proccess.score }}</view>
      </view>
    </view>
    <view class="due">
      <view class="com_choose">
        <img v-if="comChoose == '石头'" class="com_img" src="@/static/jdstb/rock.png" alt="" />
        <img v-if="comChoose == '剪刀'" class="com_img" src="@/static/jdstb/scissors.png" alt="" />
        <img v-if="comChoose == '布'" class="com_img" src="@/static/jdstb/paper.png" alt="" />
      </view>
      <view class="result">{{ result }}</view>
    </view>
    <view class="title">选择正确的手势</view>
    <view class="you_select">
      <view
        @tap="select('剪刀')"
        :class="[
          'items',
          yourChoose == '剪刀' && isRight
            ? 'success'
            : yourChoose == '剪刀' && !isRight
              ? 'error'
              : ''
        ]"
      >
        <view class="item_back" />
        <img class="choose_img" src="@/static/jdstb/scissors.png" alt="" />
        <img
          v-if="yourChoose == '剪刀' && isRight"
          class="tip_img"
          src="@/static/jdstb/success.png"
          alt=""
        />
        <img
          v-if="yourChoose == '剪刀' && !isRight"
          class="tip_img"
          src="@/static/jdstb/error.png"
          alt=""
        />
      </view>
      <view
        @tap="select('石头')"
        :class="[
          'items',
          yourChoose == '石头' && isRight
            ? 'success'
            : yourChoose == '石头' && !isRight
              ? 'error'
              : ''
        ]"
      >
        <view class="item_back" />
        <img class="choose_img" src="@/static/jdstb/rock.png" alt="" />
        <img
          v-if="yourChoose == '石头' && isRight"
          class="tip_img"
          src="@/static/jdstb/success.png"
          alt=""
        />
        <img
          v-if="yourChoose == '石头' && !isRight"
          class="tip_img"
          src="@/static/jdstb/error.png"
          alt=""
        />
      </view>
      <view
        @tap="select('布')"
        :class="[
          'items',
          yourChoose == '布' && isRight ? 'success' : yourChoose == '布' && !isRight ? 'error' : ''
        ]"
      >
        <view class="item_back" />
        <img class="choose_img" src="@/static/jdstb/paper.png" alt="" />
        <img
          v-if="yourChoose == '布' && isRight"
          class="tip_img"
          src="@/static/jdstb/success.png"
          alt=""
        />
        <img
          v-if="yourChoose == '布' && !isRight"
          class="tip_img"
          src="@/static/jdstb/error.png"
          alt=""
        />
      </view>
    </view>
    <up-overlay :show="overlayShow">
      <view class="wrap">
        <view v-if="overlayType == 'begin'" @tap="begin" class="buttons begin">
          <img class="btn_img" src="@/static/jdstb/button.png" alt="" />
          <text class="content">开始游戏</text>
        </view>
        <view v-if="overlayType == 'countDown'" class="start_down_name">{{ startCountDown }}</view>
        <view v-if="overlayType == 'modeChoose'" class="mode">
          <view class="mode_title">选择难度</view>
          <view @tap="modeSelect('easy')" class="mg64 buttons">
            <img class="btn_img" src="@/static/jdstb/button.png" alt="" />
            <text class="content">简单</text>
          </view>
          <view @tap="modeSelect('normal')" class="mg64 buttons">
            <img class="btn_img" src="@/static/jdstb/button.png" alt="" />
            <text class="content">普通</text>
          </view>
          <view @tap="modeSelect('difficult')" class="buttons">
            <img class="btn_img" src="@/static/jdstb/button.png" alt="" />
            <text class="content">困难</text>
          </view>
        </view>
        <view v-if="overlayType == 'finish'" class="finish">
          <view class="finish_title">完成训练！</view>
          <view class="final_score">
            <text class="num">{{ proccess.score }}</text>
            <text class="text">分</text>
          </view>
          <view @tap="again" class="mg56 buttons">
            <img class="btn_img" src="@/static/jdstb/button.png" alt="" />
            <text class="content">再次训练</text>
          </view>
          <view @tap="quit" class="buttons">
            <img class="btn_img" src="@/static/jdstb/button.png" alt="" />
            <text class="content">退出训练</text>
          </view>
        </view>
      </view>
    </up-overlay>
  </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { ref, reactive, computed } from 'vue'

const mode = ref('easy')
const isBegin = ref(false)
const disable = ref(false)
const overlayShow = ref(true)
const overlayType = ref('modeChoose')

const proccess = reactive({
  score: 0,
  round: 1
})

const chosens = ref(['剪刀', '石头', '布'])
const results = ref(['赢', '输', '平局'])

const comChoose = ref('')
const result = ref('')
const yourChoose = ref('')
const isRight = ref(false) // 判断本次选择是否正确

const startTime = ref(10)
const timer = ref()
const startCountDown = ref(3)

const begin = () => {
  // 游戏开始，重置数据，倒计时
  proccess.score = 0
  proccess.round = 1
  overlayType.value = 'countDown'
  startCountDown.value = 3
  const countDown = setInterval(() => {
    startCountDown.value--
    if (startCountDown.value == 0) {
      clearInterval(countDown)
      overlayShow.value = false
      isBegin.value = true
      newRound()
      setTimeout(() => {
        // 延迟改变遮罩状态防止结束状态闪现
        overlayType.value = 'finish'
      }, 200)
    }
  }, 1000)
}
const newRound = () => {
  // 开始新一轮回合，随机获取电脑手势和结果
  const index = Math.floor(Math.random() * 3)
  const index2 = Math.floor(Math.random() * 3)
  comChoose.value = chosens.value[index]
  result.value = results.value[index2]
  yourChoose.value = ''
  // 根据选择模式设置时间
  if (mode.value == 'easy') {
    startTime.value = 10
  } else if (mode.value == 'normal') {
    startTime.value = 7
  } else {
    startTime.value = 4
  }
  timer.value = setInterval(() => {
    if (startTime.value > 0) {
      startTime.value--
    } else {
      clearInterval(timer.value)
      disable.value = false
      if (proccess.round < 20) {
        proccess.round++
        newRound()
      } else {
        // 游戏结束，显示分数
        isBegin.value = false
        overlayShow.value = true
      }
    }
  }, 1000)
}

const select = (choose: any) => {
  if (proccess.round <= 20 && isBegin.value && !disable.value) {
    disable.value = true
    clearInterval(timer.value)
    yourChoose.value = choose
    if (result.value == '赢') {
      if (
        (choose == '剪刀' && comChoose.value == '布') ||
        (choose == '石头' && comChoose.value == '剪刀') ||
        (choose == '布' && comChoose.value == '石头')
      ) {
        isRight.value = true
        proccess.score += 10
      } else {
        isRight.value = false
        if (proccess.score > 0) {
          proccess.score -= 5
        }
      }
    } else if (result.value == '输') {
      if (
        (choose == '剪刀' && comChoose.value == '石头') ||
        (choose == '石头' && comChoose.value == '布') ||
        (choose == '布' && comChoose.value == '剪刀')
      ) {
        isRight.value = true
        proccess.score += 10
      } else {
        isRight.value = false
        if (proccess.score > 0) {
          proccess.score -= 5
        }
      }
    } else {
      if (choose == comChoose.value) {
        isRight.value = true
        proccess.score += 5
      } else {
        isRight.value = false
        if (proccess.score > 0) {
          proccess.score -= 5
        }
      }
    }
    if (proccess.round < 20) {
      // 游戏未结束，开始下一轮
      setTimeout(() => {
        ++proccess.round
        newRound()
        disable.value = false
      }, 1000)
    } else {
      // 游戏结束，显示分数
      overlayShow.value = true
      isBegin.value = false
      disable.value = false
    }
  }
}
const modeSelect = (item: any) => {
  mode.value = item
  startTime.value = item == 'easy' ? 10 : item == 'normal' ? 7 : 4
  overlayType.value = 'begin'
}
const again = () => {
  overlayType.value = 'modeChoose'
  overlayShow.value = true
}
const quit = () => {
  uni.reLaunch({
    url: '/pages/index/index'
  })
}
</script>
<style scoped lang="scss">
@keyframes startdownanimation {
  0% {
    opacity: 0.2;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.5);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes rotate-two {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.9);
  }
}

.body {
  position: relative;
  box-sizing: border-box;
  height: 100vh;
  padding: 36rpx 48rpx;

  .bg_img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
  }

  .top_info {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 654rpx;
    height: 148rpx;
    padding: 18rpx 0;
    background: #de983f;
    border: 4rpx solid #8c4b1a;
    border-radius: 16rpx;
    box-shadow: inset 0rpx 8rpx 4rpx 0rpx #b67523;

    .top_items {
      font-weight: 500;
      color: #431f00;
      text-align: center;
      //-webkit-text-stroke: 1rpx #fff;

      .top_font {
        font-size: 32rpx;
        text-shadow:
          -1px 0 white,
          0 1px white,
          1px 0 white,
          0 -1px white;
      }

      .top_font2 {
        margin-top: 4rpx;
        font-size: 48rpx;
        text-shadow:
          -1px 0 white,
          0 1px white,
          1px 0 white,
          0 -1px white;
      }
    }
  }

  .due {
    box-sizing: border-box;
    width: 654rpx;
    height: calc(100vh - 676rpx);
    padding: 64rpx 0;
    margin: 32rpx 0;
    text-align: center;
    background: rgb(255 255 255 / 90%);
    border: 8rpx solid #8c4b1a;
    border-radius: 58rpx;

    .com_img {
      width: 332rpx;
      height: 332rpx;
      margin: 0 auto;
      transform: rotateX(180deg);
    }

    .result {
      font-size: 144rpx;
      font-weight: 600;
      color: #6f350a;
    }
  }

  .title {
    box-sizing: border-box;
    width: 654rpx;
    height: 102rpx;
    margin-bottom: 32rpx;
    font-size: 48rpx;
    font-weight: bold;
    line-height: 102rpx;
    color: #793b07;
    text-align: center;
    background: #de983f;
    border: 4rpx solid #8c4b1a;
    border-radius: 16rpx;
    box-shadow: inset 0rpx 8rpx 4rpx 0rpx #b67523;
    -webkit-text-stroke: 1rpx #fff;
  }

  .you_select {
    display: flex;
    gap: 14rpx;
    justify-content: space-between;

    .items {
      position: relative;
      box-sizing: border-box;
      width: 207rpx;
      height: 255rpx;
      padding: 52rpx 0;
      text-align: center;
      background: rgb(255 255 255 / 90%);
      border: 8rpx solid #8c4b1a;
      border-radius: 40rpx;

      .choose_img {
        width: 152rpx;
        height: 152rpx;
      }

      .item_back {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 191rpx;
        height: 239rpx;
        background: rgb(255 255 255 / 90%);
        border-radius: 40rpx;
      }

      .tip_img {
        position: absolute;
        top: 80rpx;
        left: 56rpx;
        width: 96rpx;
        height: 96rpx;
      }
    }

    .success {
      background: rgb(36 191 107 / 50%);
      border: 8rpx solid #24bf6b;
    }

    .error {
      background: rgb(241 28 28 / 50%);
      border: 8rpx solid #f11c1c;
    }
  }

  .wrap {
    position: relative;
    display: flex;
    justify-content: center;
    height: 100%;

    .buttons {
      position: relative;
      width: 518rpx;
      height: 152rpx;
      line-height: 132rpx;
      text-align: center;
      animation: rotate-two 1s infinite;

      .btn_img {
        position: absolute;
        top: 0;
        left: 0;
        width: 518rpx;
        height: 152rpx;
      }

      .content {
        position: relative;
        z-index: 2;
        font-size: 48rpx;
        font-weight: 600;
        color: #fff;
        text-shadow: 0 2px 0 rgb(0 0 0 / 60%);
      }
    }

    .begin {
      margin-top: 768rpx;
    }

    .start_down_name {
      display: flex;
      align-items: center;
      height: 100vh;
      font-size: 200rpx;
      font-style: normal;
      font-weight: 600;
      color: #fff;
      text-align: center;
      text-shadow: 0 4rpx 0 rgb(0 0 0 / 60%);
      text-transform: none;
      animation: startdownanimation 1s ease-in-out infinite;
    }

    .mode {
      margin-top: 282rpx;
      text-align: center;

      .mode_title {
        margin-bottom: 128rpx;
        font-size: 48rpx;
        font-weight: 500;
        color: #fff;
        text-shadow: 0 4px 0 rgb(0 0 0 / 60%);
      }

      .mg64 {
        margin-bottom: 64rpx;
      }
    }

    .finish {
      margin-top: 184rpx;
      text-align: center;

      .finish_title {
        margin-bottom: 56rpx;
        font-size: 48rpx;
        font-weight: 500;
        color: #fff;
        text-shadow: 0 4px 0 rgb(0 0 0 / 60%);
      }

      .final_score {
        margin-bottom: 172rpx;

        .num {
          font-size: 240rpx;
          font-weight: 500;
          color: #fff;
          text-shadow: 0 12px 0 rgb(0 0 0 / 60%);
        }

        .text {
          font-size: 48rpx;
          font-weight: 500;
          color: #fff;
          text-shadow: 0 8px 0 rgb(0 0 0 / 60%);
        }
      }

      .mg56 {
        margin-bottom: 56rpx;
      }
    }
  }
}
</style>
